#template('colorThemeInit.vm')

.macro-selector.loading,
.macro-editor.loading {
  min-height: 1em;
}

.macro-selector > .errormessage,
.macro-editor > .errormessage {
  margin-bottom: 0;
}

ul.macro-list {
  height: 300px;
  margin: 5px 0;
  overflow: auto;
  padding: 0;
  position: relative;
}

ul.macro-list > li {
  cursor: pointer;
  padding: 6px 12px;
}
ul.macro-list > li.selected {
  background-color: #EEE;
  background-color: $theme.highlightColor;
}

ul.macro-list .macro-name,
.macro-parameters .macro-parameter-name {
  color: #333;
  color: $theme.textColor;
}

ul.macro-list .macro-description,
ul.macro-list .macro-extension,
.macro-editor .macro-description,
.macro-parameters .macro-parameter-description,
.macro-parameters > .empty {
  color: #656565;
  color: $theme.textSecondaryColor;
  font-size: smaller;
}

ul.macro-list .macro-extension {
  margin-right: 1em;
}

.macro-name::first-letter,
.macro-description::first-letter,
.macro-parameter-name::first-letter,
.macro-parameter-description::first-letter,
.macro-parameter-group-name::first-letter,
.feature-title,
.feature-choice-name::first-letter {
  text-transform: capitalize;
}

.macro-parameter-name {
  font-size: medium;
}

.dropdown-menu > li.macro-category > a {
  align-items: center;
  display: flex;
  justify-content: space-between;
  white-space: normal;
}

.macro-categories-badges .badge {
  margin-right: 5px;
}

.macro-parameters {
  margin-top: 10px;
}

.macro-title {
  padding: 30px 1em 30px 1em;
  margin: -15px -15px 0 -15px;
  background-color: #eeeeee; /* FIXME: use a theme color */
}

.macro-title .macro-name {
  font-size: var(--font-size-h1);
}

.feature-choice {
  margin-top: 1em;
}

.feature-container {
  margin-top: 1em;
  margin-left: 10px;
  margin-right: 10px;
}

.feature-container.has-error {
  border: $theme.notificationErrorColor dashed 1px;
}

.feature-choice-body.with-choice {
  padding-left: 1.5em;
}

.macro-parameter {
  margin-top: 0.5em;
  padding-left: 10px;
  padding-right: 10px;
}

.macro-parameter:first-of-type {
  margin-top: 0;
}

.feature-choice-body .macro-parameter {
  padding-left: 0;
}

.macro-parameter-name-container .mandatory, .panel-heading .mandatory {
  font-size: smaller;
  padding-left: 0.5em;
  vertical-align: top;
  font-weight: 300;
}

.macro-parameter-name, .feature-choice-name {
  color: #222222; /* FIXME: use color theme (should be text color less variable?)*/
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 0.3em;
}

.macro-parameter-group-optionals {
  padding-top: 1em;
}

.macro-parameter[data-type="boolean"],
.macro-parameter[data-type="java.lang.Boolean"] {
  position: relative;
}
.macro-parameter[data-type="boolean"] .macro-parameter-name,
.macro-parameter[data-type="java.lang.Boolean"] .macro-parameter-name {
  margin-left: 24px;
}
.macro-parameter[data-type="boolean"] .macro-parameter-field,
.macro-parameter[data-type="java.lang.Boolean"] .macro-parameter-field {
  position: absolute;
  top: 0;
}
.macro-parameter[data-type="boolean"] .macro-parameter-field input,
.macro-parameter[data-type="java.lang.Boolean"] .macro-parameter-field input {
  margin: 0;
  padding: 0;
}

.macro-parameter-description {
  margin-bottom: 5px;
}

.macro-parameter-group:not(.invisible) > .tab-content {
  border-bottom: 1px solid $theme.borderColor;
  border-left: 1px solid $theme.borderColor;
  border-right: 1px solid $theme.borderColor;
  padding: .5em;
}

.macro-parameter-group-members {
  padding: 0;
  list-style: none;
}

.macro-parameter-group.invisible {
  /* We want to see the group members but hide the tabs. */
  visibility: visible;
}

.macro-parameter-group.invisible > ul[role="tablist"] {
  display: none;
}
